<template>
  <acme-popup v-model="showPopup" position="bottom" :styles="{height: panelHeight}" @close="popupClose">
    <view class="share-sheet" :style="{height: `${shareHeight}rpx`}">
      <view class="title">{{title}}</view>
      <scroll-view scroll-x>
        <view class="list">
          <view class="item" v-for="(item, index) in actions" :key="item.title"
            :style="{
              transform: isOpen ? `translateY(0)` : `translateY(500rpx)`,
              transition: duractionArr[index] + 's'
            }"
            @click="clickItem(item, index)"
          >
            <view class="icon" :style="{background: item.color}">
              <image :src="item.img"></image>
            </view>
            <span class="title">{{item.title}}</span>
          </view>
        </view>
      </scroll-view>
      <view class="cancel" @click="cancel" :style="{paddingBottom: `${safeAreaHeight}rpx`}">
        取消
      </view>
    </view>
  </acme-popup>
</template>

<script>
  export default {
    name: "ShareSheet",
    props: {
      value: {
        type: Boolean,
        default: false
      },
      // 标题
      title: {
        type: String,
        default: '分享至'
      },
      // 内容
      actions: {
        type: Array,
        default: ()=> {
          return []
        }
      },
      // 分享面板高度
      shareHeight: {
        type: Number,
        default: 500
      }
    },
    computed: {
      panelHeight() {
        return `${this.shareHeight + this.safeAreaHeight}rpx`
      }
    },
    watch: {
      value(value) {
        this.showPopup = value
        if(value) {
          setTimeout(() => {
            this.isOpen = true
          }, 60)
        }else {
          this.isOpen = false
        }
      }
    },
    data() {
      return {
        showPopup: false,
        isOpen: false,
        duractionArr: [0.3, 0.38, 0.46, 0.54, 0.62, 0.7, 0.78, 0.86, 0.94, 1.02],
        safeAreaHeight: 0,
      }
    },
    mounted() {
      this.getSystemInfo()
    },
    methods: {
      popupClose() {
        this.close()
      },
      cancel() {
        this.close()
      },
      close() {
        this.showPopup = false
        this.$emit('input', false)
        this.$emit('close')
      },
      clickItem(item, index) {
        this.$emit('clickItem', { item, index })
        this.close()
      },
      getSystemInfo() {
        try {
          const res = uni.getSystemInfoSync()
          this.safeAreaHeight = res.safeAreaInsets.bottom
        } catch (e) {}
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import  './index.scss';
</style>
